<template>
    <div class="treasure">
        <h3>Hi 上, 快来听听</h3>
            <ul class="big-box">
                <li v-for="(item,index) in playlists" :key="index">
                    <div>
                    <img class="cover" :src="item.coverImgUrl">
                    </div>
                    <div class="bofangliang">
                    <span>{{item.playCount |numFilter(0)}}</span>
                    </div>
                    <span class="title">{{item.name}}</span>
                </li>
            </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            playlists:[]
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData:function(){
            this.$request('get','/top/playlist?cat=华语&order=hot&limit=6').then(res =>{
                console.log(res.playlists)
                this.playlists = res.playlists
            }

            )
        }
    },filters:{
    //处理播放量的格式
    /**
     * param num:小数位固定位数
     * value::处理的数值
     */
    numFilter(value,num){
        return parseFloat(value/10000).toFixed(num)+" 万"
    }
}
}
</script>
<style scoped>
.songs-tuijian h3{
    text-align: start;
    padding-left: 1rem;
    font-weight:700;
}
ul.big-box{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
ul.big-box li{
    position: relative;
    width: 30%;
    height: 12rem;
    float: left;
    padding: 0.4rem;
}
ul.big-box li > span{
    color:black;
}
.cover{
    position: relative;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    border-radius: 1rem;
    
}
.bofangliang{
  position: absolute;
  color: white;
  font-size: smaller;
  font-weight: bold;
  top:10px;
  right: 10px;
  background-color:rgb(171, 165, 165);
  border-radius: 1rem;
  padding: 0.2rem;
}
/*
display: -webkit-box;定义为盒子模型显示
  overflow: hidden;超出盒子部分隐藏
  text-overflow: ellipsis;超出部分用...表示
  -webkit-line-clamp: 2;超出两行隐藏
  -webkit-box-orient: vertical;从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
 */
.title{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>